import * as echarts from "echarts"
export const leftTopOption = {
    backgroundColor: "#0f375f",
    legend: {
      show:true,
      data: null,
      top: "5%",
      // right: '10',
      textStyle: {
        color: "rgba(250,250,250,0.6)",
        fontSize: 16,
      },
    },
    grid: {
      left: '60px', // 设置grid离容器左侧的距离
      // 其他grid配置...
  },
    barWidth: 8,//整体的宽度的
    xAxis: {
      type: "value",
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,0.2)",
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        //  改变x轴颜色
        lineStyle: {
          color: "#26D9FF",
        },
      },
      axisLabel: {
        //  改变x轴字体颜色和大小
        textStyle: {
          color: "rgba(250,250,250,0.6)",
          fontSize: 16,
        },
      },
    },
    yAxis: {
      type: "category",
      left:20,
      data: null,
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        //  改变y轴颜色
        lineStyle: {
          color: "#26D9FF",
        },
      },
      axisLabel: {
        // margin:,
        //  改变y轴字体颜色和大小
        // formatter: '{value} 人 ', //  给y轴添加单位
        textStyle: {
          color: "rgba(250,250,250,0.6)",
          fontSize: 14,
        },
      },
    },
    series: [
      {
        type: "bar",
        name: "2024",
        itemStyle: {
          normal: {
            label: {
              show: false, //开启显示
              position: "right", //在上方显示
              textStyle: {
                //数值样式
                color: "rgba(250,250,250,0.6)",
                fontSize: 16,
                fontWeight: 600,
              },
            },
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 0,
                color: "rgba(61,126,235,1)",
              },
              {
                offset: 1,
                color: "rgba(61,126,235,0)",
              },
            ]),
            borderWidth: 2,
            barBorderRadius: 15,
          },
        },
        data: [],
      },
      {
        type: "bar",
        name: "2023",
        itemStyle: {
          normal: {
            label: {
              show: false, //开启显示
              position: "right", //在上方显示
              textStyle: {
                //数值样式
                color: "rgba(250,250,250,0.6)",
                fontSize: 16,
                fontWeight: 600,
              },
            },
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 0,
                color: "rgba(15,197,243,1)",
              },
              {
                offset: 1,
                color: "rgba(15,197,243,0)",
              },
            ]),
            borderWidth: 2,
            barBorderRadius: 15,
          },
        },
        data: [],
      },
      {
        type: "bar",
        name: "2022",
        itemStyle: {
          normal: {
            label: {
              show: false, //开启显示
              position: "right", //在上方显示
              textStyle: {
                //数值样式
                color: "rgba(250,250,250,0.6)",
                fontSize: 16,
                fontWeight: 600,
              },
            },
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 0,
                color: "rgb(243, 83, 15)",
              },
              {
                offset: 1,
                color: "rgba(24, 236, 38, 0)",
              },
            ]),
            borderWidth: 2,
            barBorderRadius: 15,
          },
        },
        data: [],
      },
    ],
  };
  

  

  let rightTopColor = ["#FC619D", "#FF904D", "#48BFE3"];

  export const righTopOption = {
    grid: {
      top: "2%",
      bottom: -15,
      right: 30,
      left: -30,
      containLabel: true,
    },
    xAxis: {
      show: false,
    },
    yAxis: [
      {
        triggerEvent: true,
        show: true,
        inverse: true,
        data: null,
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          color: "#fff",
          align: "left",
          margin: 80,
          fontSize: 13,
          formatter: function (value, index) {
            if (index < 3) {
              return (
                "{idx" + index + "|" + (1 + index) + "} {title|" + value + "}"
              );
            }  else {
              return (

                "{idx|" + (1 + index) + "} {title|" + value + "}"
              );
            }
          },
          rich: {
            idx0: {
              color: "#FB375E",
              backgroundColor: "#FFE8EC",
              borderRadius: 100,
              padding: [5, 8],
            },
            idx1: {
              color: "#FF9023",
              backgroundColor: "#FFEACF",
              borderRadius: 100,
              padding: [5, 8],
            },
            idx2: {
              color: "#01B599",
              backgroundColor: "#E1F7F3",
              borderRadius: 100,
              padding: [5, 8],
            },
            idx: {
              color: "#333",
              borderRadius: 100,
              padding: [5, 8],
            },
            title: {
              width: 165,
            },
          },
        },
      },
      {
        triggerEvent: true,
        show: true,
        inverse: true,
        data: [],
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          color: "#fff",
          align: "left",
          margin: 20,
          fontSize: 13,
          formatter: function (value) {
            let studentNum = righTopOption.series[0].data.filter((item)=>{return item.name==value})[0].value
            return `学生人数:${studentNum}人`
          },
        },
      },
    ],
    series: [
      {
        name: "条",
        type: "bar",
        yAxisIndex: 0,
        data: [],
        barWidth: 10,
        itemStyle: {
          color: (val) => {
            // console.log("series",val)
            if (val.dataIndex < 3) {
              return rightTopColor[val.dataIndex];
            } else {
              return "#1990FF";
            }
          },
          barBorderRadius: 30,
        },
      },
    ],
  };
  
  // const points = [ // 散点图数据
  //   { name: '新疆', value: [87.628579, 43.793301], itemStyle: { color: '#00EEFF' } }, // 新疆
  //   { name: '四川', value: [104.076452, 30.651696], itemStyle: { color: '#00EEFF' } }, // 四川
  //   { name: '甘肃', value: [103.826777, 36.060634], itemStyle: { color: '#00EEFF' } }, // 甘肃
  //   { name: '云南', value: [102.709372, 25.046432], itemStyle: { color: '#00EEFF' } }, // 云南
  //   { name: '广西', value: [108.327537, 22.816659], itemStyle: { color: '#00EEFF' } }, // 广西
  //   { name: '湖南', value: [112.982951, 28.116007], itemStyle: { color: '#00EEFF' } }, // 湖南
  //   { name: '山东', value: [117.020725, 36.670201], itemStyle: { color: '#00EEFF' } }, // 山东
  //   { name: '河南', value: [113.753094, 34.767052], itemStyle: { color: '#00EEFF' } }, // 河南
  //   { name: '山西', value: [112.578781, 37.813948], itemStyle: { color: '#00EEFF' } }, // 山西
  //   { name: '福建', value: [119.296194, 26.101082], itemStyle: { color: '#00EEFF' } }, // 福建
  //   { name: '浙江', value: [120.152575, 30.266619], itemStyle: { color: '#00EEFF' } }, // 浙江
  //   { name: '江苏', value: [118.763563, 32.061377], itemStyle: { color: '#00EEFF' } }, // 江苏
  //   { name: '北京', value: [116.407387, 39.904179], itemStyle: { color: '#A6283F' } }, // 北京
  //   { name: '陕西', value: [108.953939, 34.266611], itemStyle: { color: '#00EEFF' } }, // 陕西
  //   { name: '广东', value: [113.266887, 23.133306], itemStyle: { color: '#00EEFF' } } // 广东
  // ]
  // const linesData = [
  //   { coords: [[116.407387, 39.904179], [87.628579, 43.793301]] },// 北京->新疆
  //   { coords: [[116.407387, 39.904179], [104.076452, 30.651696]] },// 北京->四川
  //   { coords: [[116.407387, 39.904179], [103.826777, 36.060634]] },// 北京->甘肃
  //   { coords: [[116.407387, 39.904179], [102.709372, 25.046432]] },// 北京->云南
  //   { coords: [[116.407387, 39.904179], [108.327537, 22.816659]] },// 北京->广西
  //   { coords: [[116.407387, 39.904179], [112.982951, 28.116007]] },// 北京->湖南
  //   { coords: [[116.407387, 39.904179], [117.020725, 36.670201]] },// 北京->山东
  //   { coords: [[116.407387, 39.904179], [113.753094, 34.767052]] },// 北京->河南
  //   { coords: [[116.407387, 39.904179], [112.578781, 37.813948]] },// 北京->山西
  //   { coords: [[116.407387, 39.904179], [119.296194, 26.101082]] },// 北京->福建
  //   { coords: [[116.407387, 39.904179], [120.152575, 30.266619]] },// 北京->浙江
  //   { coords: [[116.407387, 39.904179], [118.763563, 32.061377]] },// 北京->安徽
  //   { coords: [[116.407387, 39.904179], [113.266887, 23.133306]] },// 北京->广东
  //   { coords: [[87.628579, 43.793301], [108.953939, 34.266611]] }// 新疆->陕西
  // ]
  const planePath = // 飞机svg
  'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'

  export  const centerMapOption = {
    backgroundColor: '#0E2152',// 背景颜色
    geo: {// 地图配置
      map: 'china',
      // roam: true,
      zoom: 1.74,
      center: [104.06, 35.65], // 初始中心点，比如 [104.06, 35.65] 
      label: { // 图形上的文本标签
        normal: {// 通常状态下的样式
          show: true,
          textStyle: {
            color: '#fff'
          }
        },
        emphasis: {// 鼠标放上去高亮的样式
          textStyle: {
            color: '#fff'
          }
        }
      },
      itemStyle: {// 地图区域的样式设置
        // normal: { // 通常状态下的样式
        borderColor: '#5089EC',
        borderWidth: 1,
        areaColor: { //地图区域的颜色
          type: 'radial', // 径向渐变
          x: 0.5, // 圆心
          y: 0.5,// 圆心
          r: 0.8,// 半径
          colorStops: [
            { // 0% 处的颜色
              offset: 0,
              color: 'rgba(0, 102, 154, 0)'
            },
            { // 100% 处的颜色
              offset: 1,
              color: 'rgba(0, 102, 154, .4)'
            }
          ]
          // }
        },
        // 鼠标放上去高亮的样式
        emphasis: {
          areaColor: '#2386AD',
          borderWidth: 0
        }
      }
    },
    series: [
      { // 散点系列数据
        type: 'effectScatter',// 带有涟漪特效动画的散点（气泡）图
        coordinateSystem: 'geo', //该系列使用的坐标系:地理坐标系
        // 特效类型,目前只支持涟漪特效'ripple'，意为“涟漪”
        effectType: 'ripple',
        // 配置何时显示特效。可选'render'和'emphasis' 。
        showEffectOn: 'render',
        rippleEffect: { // 涟漪特效相关配置。
          period: 5, // 动画的周期，秒数。
          scale: 5,// 动画中波纹的最大缩放比例。
          // 波纹的绘制方式，可选 'stroke' 和 'fill'。
          brushType: 'fill'
        },
        zlevel: 10, // 所有图形的 zlevel 值。
        // data: props.flyLineData.pointsArr
        data: []
      },
      { // 线条系列数据
        type: 'lines',
        zlevel: 2,
        symbol: ['none', 'arrow'], // 标记的图形: 箭头
        symbolSize: 10, // 标记的大小
        effect: { // 线条特效的配置
          show: true,
          period: 3, // 特效动画的时间，单位s
          trailLength: 0.1, // 特效尾迹的长度。取值[0,1]值越大，尾迹越重
          symbol: planePath, // 特效图形的标记 可选'circle'等
          symbolSize: 30// 特效标记的大小
        },
        lineStyle: { // 线条样式
          normal: {
            color: '#93EBF8',
            width: 2.5, // 线条宽度
            opacity: 0.6, // 尾迹线条透明度
            curveness: 0.2// 尾迹线条曲直度
          }
        },
        // data: props.flyLineData.lineDataArr
        data: []
      }
    ]
  }

  export const rightBottomOption = {
  
    tooltip: {
      trigger: "item",
      formatter: (params)=>{
        if(params.seriesName=="占比"){
          return `${params.seriesName}:<br/>${params.name} : ${params.value}%`;

        }else{
          return `${params.seriesName}:<br/>${params.name} : ${params.value}人`;;

        }
      },
    },
    // toolbox: {
    //   feature: {
    //     dataView: { readOnly: false },
    //     restore: {},
    //     saveAsImage: {},
    //   },
    // },
    legend: {
      data: ["30K+", "20K~30K", "15K~20K", "10K~15K", "10K以下"],
      textStyle: {
        color: "rgba(250,250,250,0.6)",
        fontSize: 16,
      },
    },
    series: [
      {
        name: "（人数）",
        type: "funnel",
        left: "10%",
        width: "60%",
        label: {
          normal: {
            formatter: "{b}（人数）",
          },
        
        },
        labelLine: {
          normal: {
            show: true,
          },
        },
        itemStyle: {
          normal: {
            opacity: 0.7,
          },
        },
        data: [
          { value: 60, name: "30K+" },
          { value: 40, name: "20K~30K" },
          { value: 20, name: "15K~20K" },
          { value: 80, name: "10K~15K" },
          { value: 100, name: "10K以下" },
        ],
      },
      {
        name: "占比",
        type: "funnel",
        left: "10%",
        width: "60%",
        maxSize: "80%",
        label: {
          normal: {
            position: "inside",
            formatter: "{c}%",
            textStyle: {
              color: "#fff",
            },
          },
          emphasis: {
            position: "inside",
            formatter: "{b}（占比）: {c}%",
          },
        },
        itemStyle: {
          normal: {
            opacity: 0.5,
            borderColor: "#fff",
            borderWidth: 2,
          },
        },
        data: [
          { value: 30, name: "30K+" },
          { value: 20, name: "20K~30K" },
          { value: 10, name: "15K~20K" },
          { value: 60, name: "10K~15K" },
          { value: 50, name: "10K以下" },
        ],
      },
    ],
  };
  